<template>
  <div class="table-box">
    <pro-table ref="proTableRef" row-key="id" :columns="columns" :request-api="getMailPageApi">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'sys:mail:add'" type="primary" :icon="CirclePlus" @click="handleAdd"> 新增站内信 </el-button>
      </template>
      <!-- 状态 -->
      <template #isPublish="scope">
        <el-switch
          v-model="scope.row.isPublish"
          :loading="scope.row.loading"
          active-text="发布"
          inactive-text="否"
          inline-prompt
          :before-change="handleEnable.bind(scope, scope.row)"
        />
      </template>
      <!-- 参数操作 -->
      <template #operation="{ row }">
        <el-button v-auth="'sys:mail:edit'" type="primary" link :icon="EditPen" @click="handleEdit(row)"> 编辑 </el-button>
        <el-button v-auth="'sys:mail:del'" type="danger" link :icon="Delete" @click="handleDelete(row)"> 删除 </el-button>
      </template>
    </pro-table>
    <!-- 编辑站内信 -->
    <mail-edit ref="editDialogRef" />
  </div>
</template>

<script setup lang="ts" name="mailManage">
import type { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import type { SysMail } from "@/api/interface";
import { ref } from "vue";
import { yesOrNoConst, mailTypeConst, mailSendingRangeConst } from "@/utils/dict";
import { useHandleData } from "@/hooks/useHandleData";
import { addMailApi, editMailApi, switchPublishApi, deleteMailApi, getMailApi, getMailPageApi } from "@/api/modules/system/mail";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import MailEdit from "./components/edit.vue";

/** 表格实例 */
const proTableRef = ref<ProTableInstance>();
/** 编辑弹窗实例 */
const editDialogRef = ref<InstanceType<typeof MailEdit> | null>(null);

/** 表格配置项 */
const columns: ColumnProps[] = [
  { prop: "title", label: "标题", align: "left", width: 300, search: { el: "input" } },
  { prop: "mailType", label: "类型", align: "left", tag: true, enum: mailTypeConst, search: { el: "select" } },
  { prop: "sendingRange", label: "发送范围", align: "left", tag: true, enum: mailSendingRangeConst, search: { el: "select" } },
  { prop: "createUserName", label: "创建人" },
  { prop: "isPublish", label: "发布", width: 100, enum: yesOrNoConst, search: { el: "select" } },
  { prop: "operation", label: "操作", width: 180, fixed: "right" }
];

/**
 * 添加站内信
 *
 * @returns void
 */
const handleAdd = () => {
  const editParams = {
    title: "添加站内信",
    mail: {
      mailType: 0,
      message: ""
    },
    getTableList: proTableRef.value?.getTableList,
    submitApi: addMailApi
  };
  editDialogRef.value?.acceptParams(editParams);
};

/**
 * 编辑站内信
 *
 * @param param 选中的站内信
 * @returns void
 */
const handleEdit = (param: Partial<SysMail.Result>) => {
  getMailApi(param.id!).then(({ data }) => {
    const editParams = {
      title: "编辑站内信",
      mail: { ...data },
      getTableList: proTableRef.value?.getTableList,
      submitApi: editMailApi
    };
    editDialogRef.value?.acceptParams(editParams);
  });
};

/**
 * 发布/撤回站内信
 *
 * @param param 选中的站内信
 * @returns void
 */
const handleEnable = (param: Partial<SysMail.Result> & { loading?: boolean }) => {
  param.loading = true;
  return switchPublishApi({ id: param.id! })
    .then(({ data }) => {
      if (data) {
        return Promise.resolve(true);
      } else return Promise.reject(new Error(`${param.isPublish ? "发布" : "撤回"}失败`));
    })
    .finally(() => {
      param.loading = false;
    });
};

/**
 * 删除站内信
 *
 * @param param 选中的站内信
 * @returns void
 */
const handleDelete = (param: Partial<SysMail.Result>) => {
  useHandleData(deleteMailApi, { ids: [param.id] }, `删除【${param.title}】信息`).then(res => {
    if (res) proTableRef.value?.getTableList();
  });
};
</script>
